<template>
    <div class="home">
        <!-- header -->
        <header class="g-header-container">
            <home-header></home-header>
        </header>
        <div class="g-container">
        <Scroll height="617">
        <!-- slider -->
        <Card>
            <home-carousel class="home-carousel"></home-carousel>
        </Card>
        <!-- nav -->
        <Card>
            <home-nav></home-nav>
        </Card>
        <!-- commodity -->
        <Card>
            <home-commodity></home-commodity>
        </Card>
        </Scroll>
        <!-- backtop -->
        <div class="g-backtop"></div>
        
        </div>
        <router-view></router-view>
        
    </div>
</template>
<script>
import HomeHeader from './header';
import HomeCarousel from './carousel';
import HomeNav from './nav';
import HomeCommodity from './commodity'
export default {
    name: 'Home',
    components: {
        HomeHeader,
        HomeCarousel,
        HomeNav,
        HomeCommodity
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/sass/_mixins.scss';
    .home{
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-color: $bgc-theme;
        &-carousel{
            height: 183px;
        }
    }
</style>